import Vue from "vue";
import App from "./App.vue";
import Vuex from "./Vuex/index.js";
import VueRouter from "./vue-router/index.js";
import demo from "./components/demo.vue";
import about from "./components/about.vue";
import ab from "./components/ab.vue";

const store = new Vuex.Store({
  //单例模式
  state: {
    age: 30,
  },
  getters: {
    changeAge(state) {
      console.log("缓存机制");
      return state.age + 5;
    },
  },
  mutations: {
    addAge: (state, num) => {
      console.log("mutations");
      state.age = state.age + num;
    },
  },
  actions: {
    asyncAge: ({ commit }, num) => {
      console.log("mutations");
      setTimeout(() => {
        commit("addAge", num);
      }, 1100);
    },
  },

  // 模块 mutations:['addAge','addAge','addAge'] 都合并了
  modules: {
    a: {
      state: { age: 90 },
      mutations: {
        addAge: (state, num) => {
          console.log("aaa模块中的mutations");
          state.age = state.age + num;
        },
      },
    },
    b: {
      state: { age: 190 },
      mutations: {
        addAge: (state, num) => {
          console.log("bbb模块中的mutations");
          state.age = state.age + num;
        },
      },
    },
  },
});
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.config.productionTip = false;

let router = new VueRouter({
  mode: "hash",
  routes: [
    {
      path: "/",
      name: "home",
      component: demo,
      children: [
        {
          path: "/about",
          name: "about",
          component: about,
          children: [
            {
              path: "/ab",
              name: "ab",
              component: ab,
            },
          ],
        },
      ],
    },
  ],
});
router.beforeEach((from, to, next) => {
  console.log(123);
  next();
});
router.beforeEach((from, to, next) => {
  console.log(345);
  next();
});
new Vue({
  store,
  router,
  render: (h) => h(App),
}).$mount("#app");
